import React, { Component, createContext } from 'react'


// 创建一个上下文对象
const TitleContext = createContext()
const MainContext = createContext()

// displayName 就是用来给 Context 添加自定义名称用的
// 在浏览器控制台安装 react 开发工具，可以查看的到
TitleContext.displayName = 'title'
MainContext.displayName = 'main'

class First extends Component {
    // 2. 通过静态属性的方式来接收
    static contextType = TitleContext
    render() {
        return (
            <>
                <div>First 组件 ---- {this.context.title} - {this.context.name} - {this.context.age}</div>
                <Son />
            </>
        )
    }
}
// 1. 通过组件名的方式接收
// First.contextType = TitleContext

const Son = () => {
    return <>
        <div>Son 组件 -----  </div>

        {/* 函数式组件的接收方法 */}
        <TitleContext.Consumer>
            {
                (value) => {
                    return <h1>{value.title} - {value.name} - {value.age}</h1>
                }
            }
        </TitleContext.Consumer>

    </>
}
// 函数式组件中不能使用 Son.contextType 接收
{/* // Son.contextType = TitleContext */ }

export default class App extends Component {
    state = {
        title: '传家宝'
    }
    render() {
        return (
            <div>
                <div>App ----- {this.state.title} </div>

                <TitleContext.Provider value={{
                    title: this.state.title,
                    name: '隔壁老王',
                    age: 11
                }}>
                    <MainContext.Provider value={'辣条'}>
                        <First />
                    </MainContext.Provider>
                </TitleContext.Provider>



            </div>
        )
    }
}
